<template>
  <div class="maincontain">
    <div class="filter-bar"></div>
    <div class="userlist">
      <a-table
        :pagination="pagination"
        @change="handleTableChange"
        :dataSource="dataSource"
        :columns="columns"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space wrap>
              <a-button
                size="small"
                :disabled="record.state === 3"
                @click="
                  () => {
                    deleteApply(record);
                  }
                "
                >撤回</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>

      <a-modal
        v-model:visible="isEditModalVisible"
        title="修改申请信息"
        @ok="submitEditForm"
        @cancel="closeEditModal"
      >
        <a-form
          :model="editFormData"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="申请实验室" prop="labName">
            <a-select v-model:value="editFormData.labName" />
          </a-form-item>
          <a-form-item label="申请学期" prop="semesterName">
            <a-select v-model:value="editFormData.semesterName" />
          </a-form-item>
          <a-form-item label="周次" prop="week">
            <a-select v-model:value="editFormData.week" />
          </a-form-item>
          <a-form-item label="星期" prop="day">
            <a-select v-model:value="editFormData.day" />
          </a-form-item>
          <a-form-item label="节次" prop="session">
            <a-select v-model:value="editFormData.session" />
          </a-form-item>
          <a-form-item label="申请理由" prop="reason">
            <a-textarea v-model:value="editFormData.reason" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, createVNode, onMounted, ref } from "vue";

import { studentLabQuery, editLabApply } from "@/api/methods/studentReq";
import { userInfo, userInfoJson } from "@/utils/userInfo";
import { omit } from "lodash";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

const columns = [
  { title: "申请实验室", dataIndex: "labName", key: "labName", width: "170px" },
  { title: "申请学期", dataIndex: "semesterName", key: "semesterName" },
  {
    title: "周次",
    dataIndex: "week",
    key: "week",
    customRender: ({ text, record }) => {
      return translateWeek(text);
    },
  },
  {
    title: "星期",
    dataIndex: "day",
    key: "day",
    customRender: ({ text, record }) => {
      return translateDay(text);
    },
  },
  {
    title: "节次",
    dataIndex: "session",
    key: "session",
    customRender: ({ text, record }) => {
      return translateSession(text);
    },
  },
  {
    title: "申请理由",
    dataIndex: "reason",
    key: "reason",
  },
  {
    title: "申请进度",
    dataIndex: "state",
    key: "state",
    customRender: ({ text, record }) => {
      return translateState(text);
    },
  },
  { title: "操作", dataIndex: "action", key: "action", width: "160px" },
];

const router = useRouter();
const dataSource = ref();
const pageConfig = ref({
  pageSize: 10,
  page: 1,
  total: 0,
});
interface IPagenation {
  current: number;
  pageSize: number;
  total: number;
}
const pagination = computed(() => ({
  total: pageConfig.value.total,
  current: pageConfig.value.page,
  pageSize: pageConfig.value.pageSize,
}));
const loading = ref(false);
const handleTableChange = async (pagination: IPagenation) => {
  pageConfig.value.page = pagination.current;
  pageConfig.value.pageSize = pagination.pageSize;
  loading.value = true;
  const queryParams = {
    ...omit(pageConfig.value, "total"),
    id: userInfo.value.id,
  };
  const { data: res } = await studentLabQuery(queryParams);
  reflectMapDataSource(res);
  loading.value = false;
};
onMounted(async () => {
  loading.value = true;
  const queryParams = {
    ...omit(pageConfig.value, "total"),
    id: userInfo.value.id,
  };
  const { data: res } = await studentLabQuery(queryParams);
  reflectMapDataSource(res);
  loading.value = false;
});
const reflectMapDataSource = (res: any) => {
  pageConfig.value.total = res.total;
  dataSource.value = res.records.map((item: any) => {
    return {
      id: item.id,
      studentId: item.studentId,
      studentName: item.studentName,
      labId: item.labId,
      labName: item.labName,
      semesterId: item.semesterId,
      semesterName: item.semesterName,
      week: item.week,
      day: item.day,
      session: item.session,
      state: item.state,
      reason: item.reason,
    };
  });
  console.log(dataSource.value);
};

const isEditModalVisible = ref(false);
const editFormData = ref({
  labName: "",
  semesterName: "",
  week: "",
  day: "",
  session: "",
  reason: "",
});

const closeEditModal = () => {
  isEditModalVisible.value = false;
};

const deleteApply = async (record: any) => {
  try {
    const deletedData = {
      id: record.id,
      status: 3,
      studentId: record.studentId,
      studentName: record.studentName,
      labId: record.labId,
      labName: record.labName,
      semesterId: record.semesterId,
      semesterName: record.semesterName,
      week: record.week,
      day: record.day,
      session: record.session,
      reason: record.reason,
    };
    await editLabApply(deletedData);
    message.success("删除申请成功");
    reloadData();
  } catch (error) {
    message.error("删除申请失败");
  }
};

async function reloadData() {
  const queryParams = {
    ...omit(pageConfig.value, "total"),
    id: userInfo.value.id,
  };
  const { data: res } = await studentLabQuery(queryParams);
  reflectMapDataSource(res);
}

const translateState = (state: number) => {
  switch (state) {
    case 0:
      return "未审核";
    case 1:
      return "通过";
    case 2:
      return "驳回";
    case 3:
      return "已撤回";
    default:
      return "未知";
  }
};

const translateWeek = (week) => {
  return "第" + week + "周";
};

const translateDay = (day) => {
  switch (day) {
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
    case 7:
      return "星期日";
    default:
      return "--";
  }
};

const translateSession = (session) => {
  switch (session) {
    case 1:
      return "1-2";
    case 2:
      return "3-5";
    case 3:
      return "6-7";
    case 4:
      return "8-9";
    case 5:
      return "10-12";
    case 6:
      return "13-15";
    default:
      return "--";
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontain {
  display: flex;
  flex-direction: column;
  .createuser {
    margin-bottom: 15px;
  }
}
</style>
